<template>
  <div class="enpty" :style="{ width, height }">
    <div class="msg">
      <div
        class="img"
        :style="{ width: `${iconWidth}rpx`, height: `${iconHeight}rpx` }"
      >
        <xh-img :src="iconUrl" />
      </div>
      <div class="desc" :style="{ color: color }">{{ title }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    //   无数据icon
    iconUrl: {
      default:
        "https://hyyxboss.oss-cn-shenzhen.aliyuncs.com//img/pub/XhEmpty.png",
    },
    // 无数据标题
    title: {
      default: "暂无数据",
    },
    // 无数据字体颜色
    color: {
      default: "#888888",
    },
    // 中间icon高度
    iconHeight: {
      default: "200",
    },
    // 中间icon宽度
    iconWidth: {
      default: "220",
    },
    // 整体高度
    width: {
      default: "100%",
    },
    // 整体宽度
    height: {
      default: "100%",
    },
  },
};
</script>

<style lang="scss" scoped>
.enpty {
  //   width: 100%;
  //   height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .img {
    width: 220rpx;
    height: 200rpx;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .desc {
    font-size: 26rpx;
    font-weight: 500;
    margin-top: 12rpx;
    text-align: center;
  }
}
</style>
